<template>
  <div class="page-container">
    <div class="toolbar" style="float:left;padding-top:10px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <kt-button icon="fa fa-plus" :label="$t('action.add')" perms="sys:user:save" type="primary" @click="handleAdd" />
        </el-form-item>
      </el-form>
    </div>
    <cs-table
      :table-data="tableData"
      :table-label="tableLabel"
      @handleButton="handleButton"
      :loading="loading"
      :isSelection="isSelection"
      :table-option="tableOption"
    >
      <template slot="isOpen" slot-scope="scope">
        <el-switch
          v-model="scope.row.isOpen === 0 ? true : false"
          @change="handleSwitch(scope.row)"
        >
        </el-switch>
      </template>
    </cs-table>
    <edit-daily v-if="editDailyVisible" ref="editDaily" @refreshDataList="queryGetTemplate"></edit-daily>
  </div>
</template>
<script>
  import CsTable from '@/components/cs-table'
  import EditDaily from './edit-daily'
  import {getTemplate, deleteTemplate, queryConfigStatus} from '@/api/dailyweekly/workflow'
  import KtButton from "@/views/Core/KtButton"
  export default {
    data() {
      return {
        tableData: [],
        tableLabel: [
          { label: '模板名称', param: 'templateName', align: 'center'},
          { label: '模板内容', param: 'templateText', align: 'assignee', isShow: true},
          { label: '状态', param: 'isOpen', align: 'center', width: '100px', slot: true},
          { label: '创建时间', param: 'createTime', align: 'center', isShow: true}
        ],
        tableOption: {
          label: '操作',
          width: '300',
          options: [
            { label: '编辑', type: '', icon: 'el-icon-edit', methods: 'edit', auth: 'sys:user:save' },
            { label: '删除', type: 'danger', icon: 'el-icon-s-delete', methods: 'delete', auth: 'sys:user:save' }
          ]
        },
        isSelection: false,
        loading: false,
        editDailyVisible: false,
        size: window.SITE_CONFIG.tableSize
      }
    },
    components: {
      CsTable,
      EditDaily,
      KtButton
    },
    created () {
      this.queryGetTemplate()
    },
    methods: {
      handleSwitch (val) {
        this.$confirm(`确认启用该数据？`, '提示', {})
          .then(() =>
            queryConfigStatus(val.id).then(res => {
              if (res.code === 200) {
                this.queryGetTemplate()
              }
            }))
      },
      // 查询列表
      async queryGetTemplate () {
        this.loading = true
        const data = await getTemplate()
        if (data) {
          if (data.code === 200) {
            this.loading = false
            this.tableData = data.data
          } else {
            this.tableData = []
          }
        }
      },
      async deleteTemplate (id) {
        const data = await deleteTemplate(id)
        if (data) {
          if (data.code === 200) {
            this.queryGetTemplate()
          }
        }
      },
      // 删除
      handleDelete(id) {
        this.$confirm('确认删除这条数据吗？', '提示', {})
          .then(() => {
            this.deleteTemplate(id)
          })
      },
      // 新增
      handleAdd () {
        this.editDailyVisible = true
        this.$nextTick(() => {
          this.$refs.editDaily.init()
        })
      },
      handleButton (methods) {
        if (methods.methods === 'edit') {
          this.editDailyVisible = true
          this.$nextTick(() => {
            this.$refs.editDaily.init(methods.row.id)
          })
        } else if (methods.methods === 'delete') {
          this.handleDelete(methods.row.id)
        }
      }
    }
  }
</script>
